import React, { PureComponent } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legendScroll';
import styles from './bar.less';
import PropTypes from 'prop-types'

export default class Bar extends PureComponent {

  static propTypes = {
    unit: PropTypes.string.isRequired,
    toPage: PropTypes.function
  }

  constructor(props){
    super(props);
    this.categories = [];
    this.series= []
  }

  componentDidMount() {
    this.Bar = echarts.init(document.getElementById('bar'));
    this.Bar.setOption({
      grid: {
        top: 20,
        left: 116,
        bottom: 0,
      },
      title: {
          text: '泵送总量图表'
      },
      tooltip: {},
      legend: {
          show: false
      },
      silent: true,
      xAxis: {
          position: 'top',
          axisTick: {
            show: false
          },
          splitNumber: 1,
          axisLine: {
            lineStyle: {
              color: '#E4E4E4'
            }
          },
          axisLabel: {
            formatter: (value, index) => {
              return value+this.props.unit
            },
            showMinLabel: false,
            color: '#666666',
          },
          splitLine: {
            show: false
          },
      },
      yAxis: {
        data: [],
        inverse: true,
        offset: 50,
        triggerEvent:true,
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#E4E4E4',
          }
        },
        axisLabel: {
          color: '#000',
          fontSize: 14,
          lineHeight: 23,
          width: 116,
          align: 'center',
        },
        splitLine: {
          show: false,
        },
      },
      series: [{
          name: '泵送总量',
          type: 'bar',
          data: [],
          itemStyle: {
            color: '#D0B17E'
          },
          barWidth: 12,
          label: {
            position: 'right',
            show: true,
            color: '#000'
          },
      }],
    });

    this.Bar.on('click',(params) => {

      if(params.componentType =="yAxis" || params.componentType =="xAxis" ){
        if(params.value!=='行业平均值'){
          this.props.toPage({ equipCode: params.value })
        }
      }
    });
     
  }

  init = (categories, series) => {
    console.log('categories', categories, series)
    this.Bar.setOption({
      yAxis: {
        data: categories,
      },
      series: [{
        // name: '泵送总量',
        data: series,
      }]
    })
    const autoHeight = categories.length * 40;
    this.Bar.getDom().style.height = autoHeight + 'px';
    this.Bar.resize();
  }

  render() {
    return (
      <div style={{ position: 'relative' }}>
        <div className={styles.title}>
          <span className={styles.title_bold}>按车辆统计</span>
          <span className={styles.title_medium}>点击车辆编号进入车辆详情</span>
        </div>
        <div id="bar" className={styles.chart}></div>
      </div>
      
    )
  }

}